import React, { Component } from 'react';
import http from '../../plugins/axios.js';
import {
    NavBar,
    List,
    InputItem,
    WhiteSpace,
    Button,
    Toast,
} from 'antd-mobile';

export default class BlogEdit extends Component {
    state = {
        bid: 0,
        title: '',
        content: '',
    };

    componentDidMount() {
        this.getDetail();
    }

    async getDetail() {
        const res = await http.get(`/blogs/${this.props.match.params.id}`);
        console.log('res', res);
        this.setState({ ...res.data });
    }

    titleOnChange(title) {
        this.setState({ title });
    }

    contentOnChange(content) {
        this.setState({ content });
    }

    async update() {
        const { title, content } = this.state;
        const res = await http.put(`/blogs/${this.state.bid}`, {
            title,
            content,
        });
        console.log('res', res);
        if (res.code !== 204) {
            Toast.fail(res.message, 1);
            return;
        }
        this.props.history.go(-1);
    }

    render() {
        return (
            <div className="blog-edit">
                {/* 顶部导航 */}
                <NavBar mode="light">网站博客</NavBar>

                <WhiteSpace />

                <List renderHeader={() => <h3>Title</h3>}>
                    <InputItem
                        placeholder="博客标题"
                        value={this.state.title}
                        onChange={(val) => {
                            this.titleOnChange(val);
                        }}
                    />
                </List>

                <List renderHeader={() => <h3>Content</h3>}>
                    <InputItem
                        placeholder="博客内容"
                        value={this.state.content}
                        onChange={(val) => {
                            this.contentOnChange(val);
                        }}
                    />
                </List>

                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />

                <List renderHeader={() => <h2>评论</h2>}>
                    <p>123213</p>
                    <p>123213</p>
                    <p>123213</p>
                    <p>123213</p>
                    <p>123213</p>
                    <p>123213</p>
                </List>

                <Button onClick={() => this.update()}>发表</Button>
            </div>
        );
    }
}
